<template>
    <div class="tab">
        <no-data v-if=""></no-data>
        <ul class="tab-list">
            <li class="tab-title">
                    <div class="tab-items">
                        <span class="title-item" @click="doTab" :class="{'active':tabKey}" v-for="(value,tabKey) in tabMsg.tabTiles" :key="tabKey">{{value.text}}</span>
                    </div>
            </li>
            <li class="tab-item" v-for="(value,tabListValue) in tabMsg.tabList" :key="tabListValue">
                <img class="border-radius25rem tab-userheader" :src="value.userName" alt="">
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "tab",
        prop:{
            tabProp:Object
        },
        mounted(){
            this.tabMsg = Object.assign({},this.tabMsg,this.tabProp);
        },
        data(){
            return{
                tabMsg:{
                    tabTiles:[
                        {
                            'text':'sdafsdf',
                            'id':0,
                        },
                        {
                            'text':'sdafsdfsdafsdfsdafsdf',
                            'id':1,
                        },
                        {
                            'text':'sdafsdfsdafsdfsdafsdfsdafsdfsdafsdfsdafsdf',
                            'id':2,
                        },
                        {
                            'text':'sdafsdfsdafsdfsdafsdfsdafsdfsdafsdfsdafsdfsdafsdfsdafsdfsdafsdf',
                            'id':3,
                        },
                    ],
                    tabList:[
                        {
                            "mediaId": 0, /*@mediaId:媒体id*/
                            "userId": 3309,/*@mediaId:用户id*/
                            "userName": "宏员11",/*@mediaId:用户昵称*/
                            "photoUrl": "https://oss.pg.yibaotong.top/images/user/moremtouxiang1@3x.png",/*@mediaId:用户头像*/
                        }
                    ]
                },
            }
        },
        methods:{
        },
        watch:{
            tabProp(val){
                this.tabMsg = Object.assign({},this.tabMsg,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    .tab-list{
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        background-color: #fff;
    }
    .tab-title{
        border-bottom:1px solid #F0F0F0;
        width: 100%;
        height: .5rem;
        line-height: .5rem;
        overflow: hidden;
    }
    .tab-witems{
        white-space: nowrap;
        width: auto;
        height: .5rem;
        overflow: hidden;
    }
    .tab-items{
        white-space: nowrap;
        color: #999;
        padding: 0 .15rem;
        height: .7rem;
        overflow: auto;
    }
    .title-item{
        display: inline-block;
        color: #999999;
        font-size: .15rem;
        padding-right: .3rem;
    }
    .tab-item{
        height: .5rem;
        line-height: .5rem;
        padding: 0 .15rem;
        color: #666666;
        font-size: .15rem;
    }
    .tab-userheader{
        width: .24rem;
        height: .24rem;
    }
</style>